<template>
  <div class="blog-info-container">
    <div v-if="blogInfo.blogSource === '原创'" class="label-basic" title="这是原创文章">原<br>创</div>
    <div v-if="blogInfo.blogSource === '转载'" class="label-basic" title="这是转载文章">转<br>载</div>
    <div v-if="blogInfo.blogSource === '翻译'" class="label-basic" title="这是翻译文章">翻<br>译</div>
    <!--博客内容-->
    <div class="info-container">
      <a-spin tip="博客内容获取中" :spinning="blogInfoLoading">
        <div class="blog-info-title">
          {{ blogInfo.blogTitle }}
        </div>
        <div class="blog-info-meta">
          <div class="info-created-time">
            发布于: <span>{{ blogInfo.createdTime }}</span>
            <span style="margin-left: 15px" title="作者"><a-icon type="link" />{{ blogInfo.nickname }}</span>
          </div>
          <!--收藏点赞喜欢-->
          <div class="info-meta">
            <a-icon type="eye" /> {{ blogInfo.blogRead }}
            <a-icon type="like" /> {{ blogInfo.blogGoods }}
            <a-icon type="heart" /> {{ blogInfo.blogCollection }}
            <a-icon type="message" /> {{ blogInfo.blogComment }}
          </div>
        </div>
        <div v-lazy-container="{ selector: 'img',preload:1, error: error, loading: loading }" class="blog-info-parent">
          <div id="blogInfoContainer" v-highlight class="blog-info-content" v-html="blogInfo.blogContent" />
          <a-divider v-if="blogInfo.blogContent">End</a-divider>
        </div>
        <div v-if="showErrorTip">
          <span style="color:red;">该博客未发布或不存在,请联系管理员</span>
        </div>
        <div v-if="user.username" class="blog-info-bottom">
          <div class="icon-container">
            <div :class="isBlogGoods?'info-bottom-item goodsActive':'info-bottom-item'" @click="handlerBlogGoods"><a-icon type="like" /> 点赞</div>
            <div :class="isCollect?'info-bottom-item goodsActive':'info-bottom-item'" @click="handlerSubmitCollection"><a-icon type="heart" /> 收藏</div>
          </div>
        </div>
      </a-spin>
      <mulu :nav="nav" :display="showMulu" :class="animationFlag?'leftAnimation':'rightAnimation'" />
      <!--<div v-if="nav.length>0" class="mulu">
        <div style="width: 100%;line-height: 20px;padding:15px 25px;color: #333;font-size: 20px">目录</div>
        <ul id="mulubox" ref="ul">
          <li v-for="item in nav" :key="item.anchor" :class="item.tag === 'H2'?'h2padding':''" :title="item.title" @click="toAnchorView(item.anchor)">{{ item.title }}</li>
        </ul>
      </div>-->
    </div>
    <!--评价内容-->
    <div v-if="user.username" id="reply-comment" class="evaluation-container">
      <a-spin :spinning="commentLoading" tip="评论提交中">
        <h5 v-if="commentNickName" style="color: darkred;padding:9px;display: flex;flex-flow: row nowrap;justify-content: space-between;align-item:center">回复 @ {{ commentNickName }} : <span class="coment-close-info" @click="closeComment">关闭回复</span></h5>
        <a-textarea
          v-model="evaluationContent"
          :placeholder="placewords"
          :auto-size="{ minRows: 5, maxRows: 7 }"
        />
      </a-spin>

      <div class="evaluation-bottom">
        <a-icon type="smile" class="meh-icon" @click="addEmoji" />
        <VEmojiPicker v-show="emojiVisible" class="emoji-view" @select="selectEmoji" />
        <div class="evaluation-bottom-right">
          <div v-show="countShow" class="count">还能输入{{ evaluationContentCount }}个字符</div>
          <a-button type="primary" @click="handlerSubmitComment">
            发表评论
          </a-button>
        </div>
      </div>
    </div>
    <div v-if="!user.username" class="not-login-notify">
      <span>只有登录之后才可以评论、点赞、收藏哦，赶快<router-link to="/login">登录</router-link>吧!</span>
      <span>使用 <img src="../../assets/QQ.png" class="qqImage" height="48" width="48" @click="qqLogin">登陆</span>
    </div>
    <!--评价列表-->
    <!--<div class="evaluation-list">
      <div v-for="item in commentList" :key="item.id" class="evaluation-list-container">
        <img :src="item.user.header" class="evaluation-header">
        <div class="evaluation-info">
          &lt;!&ndash;信息顶部 昵称 点赞量&ndash;&gt;
          <div class="info-top">
            <div class="info-nickname">
              {{ item.user.nickname }}
            </div>
            <div :class="activeCommentGoods===item.id?'info-like goodsActive':'info-like'" @click="commentGood(item.id)">
              <a-icon type="like" /> {{ item.commentGood }}
            </div>
          </div>
          &lt;!&ndash;发表时间&ndash;&gt;
          <div class="info-created-time">
            发表于: <span class="info-create-time">{{ item.createdTime }}</span>
          </div>
          &lt;!&ndash;评价内容&ndash;&gt;
          <div class="info-content">
            {{ item.commentContent }}
          </div>
        </div>
      </div>
    </div>-->
    <!--<a-list
      class="comment-list"
      :header="`${commentList.length} 条评论`"
      item-layout="horizontal"
      :data-source="commentList"
    >
      <a-list-item slot="renderItem" slot-scope="item" class="itemStyle">
        &lt;!&ndash;递归渲染多级评论&ndash;&gt;
        <reply-comment :replycomments="item" />
      </a-list-item>
    </a-list>-->
    <!--<div class="muluflag" @click="showMuluHandler()">
      目录
    </div>-->
    <div class="reply-content">
      <h5 style="padding-left:15px;display:flex;justify-content:space-between;align-item:center">一共{{ blogCommentsSum }}条评论 <span class="sortKey" @click="convertSort">转序</span></h5>
      <reply-item :children="commentList" @getCommentByBlogId="getCommentByBlogId" @getNickName="getNickName" />
    </div>
  </div>
</template>

<script>
import blogApi from '@/api/blog'
import commentApi from '@/api/comment'
import VEmojiPicker from 'v-emoji-picker'
import moment from 'moment'
import '@/styles/marked.css'
import marked from 'marked'
import mulu from './mulu'
import replyItem from './reply-item'
import blog from '../../api/blog'

export default {
  name: 'Info',
  components: {
    VEmojiPicker,
    replyItem,
    mulu
  },
  data() {
    return {
      evaluationContent: '',
      evaluationContentCount: 300,
      countShow: false,
      blogInfo: {},
      commentList: [],
      blogInfoLoading: false, // 博客内容加载中
      user: this.$store.getters.getUser,
      isBlogGoods: false,
      commentLoading: false, // 评论提交loading
      activeCommentGoods: '',
      isCollect: false,
      emojiVisible: false,
      action: null,
      moment,
      muluVisible: false,
      tempScroll: 0,
      nav: [],
      animationFlag: true,
      showMulu: false,
      blogCommentsSum: 0,
      commentNickName: '',
      commentId: '',
      placewords: '请输入评论，评论字数不能大于300',
      // false则是降序
      sortFlag: false,
      error: process.env.VUE_APP_LOADING__ERROR_IMG,
      loading: process.env.VUE_APP_LOADING_IMG,
      eventFlag: false,
      showErrorTip: false
    }
  },
  watch: {
    'evaluationContent': function(newVal, oldVal) {
      if (newVal.length > 300) {
        this.evaluationContent = this.evaluationContent.substring(0, 300)
      }
      const newVallength = newVal === '' ? 0 : newVal.length
      const oldVallength = oldVal === '' ? 0 : oldVal.length
      this.evaluationContentCount = this.evaluationContentCount - (newVallength - oldVallength)
      if (this.evaluationContent.length !== 0) {
        this.countShow = true
      } else {
        this.countShow = false
      }
    },
    '$store.state.user': function(newVal, oldVal) {
      if (newVal) {
        this.user = this.$store.getters.getUser
      }
    },
    '$route.params.id': function(newVal, oldVal) {
      this.getInfo(newVal)
      this.getCommentByBlogId(this.$route.params.id)
      this.getBlogGoods()
      this.getCollect()
      this.getNavTitle()
      this.showMulu = false
    }
  },
  mounted() {
    // 先给页面注册滚动事件
    document.addEventListener('scroll', this.Scroll, true)
  },
  created() {
    const id = this.$route.params.id
    // 获取博客信息
    this.getInfo(id)
    // 获取评价
    this.getCommentByBlogId(this.$route.params.id)
    this.getBlogGoods()
    this.getCollect()
    this.getCommentsSum()
    const fromLogin = this.$store.getters.getFromLogin
    if (fromLogin === true) {
      const element = document.querySelector('.evaluation-bottom')
      element.scrollIntoView()
      this.$store.commit('SET_FROMLOGIN', false)
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.Scroll, true)
    window.removeEventListener('copy', this.handleCopy)
  },
  methods: {
    // 处理复制事件
    handleCopy(e) {
      // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
      const clipboardData = event.clipboardData || window.clipboardData
      // 如果未复制或者未剪切，则return出去
      if (!clipboardData) { return }
      // Selection 对象，表示用户选择的文本范围或光标的当前位置。
      //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
      const text = window.getSelection().toString()
      if (text && text.length > 20) {
        // 如果文本存在，首先取消文本的默认事件
        event.preventDefault()
        // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本
        // setData(format, data);参数
        // format
        // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
        // data
        // 一个 DOMString表示要添加到 drag object的数据。
        if (this.blogInfo) {
          clipboardData.setData('text/plain', text + `\n——————————————————————————————————————————\n本文为闲言博主「${this.blogInfo.nickname}」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。\n原文链接：http://www.likunkun.club/info/${this.blogInfo.blogId}`)
        }
      }
    },
    addCopyEvent(blogInfo) {
      if (!this.eventFlag) {
        // 监听整个网页的copy(复制)事件
        document.getElementById('blogInfoContainer').addEventListener('copy', this.handleCopy)
        this.eventFlag = true
      }
    },
    qqLogin() {
      const qqAppId = '101934257' // 上面申请得到的appid
      const qqAuthPath = 'http://www.likunkun.club/front/#/qqauth' // 前面设置的回调地址
      const state = `${this.$route.params.id}` // 防止CSRF攻击的随机参数，必传，登录成功之后会回传，最好后台自己生成然后校验合法性
      // this.openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`)
      this.$store.commit('SET_FROMLOGIN', true)
      window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`
    },
    // 子组件给父组件填充值
    setCommentList(commentList) {
      this.commentList = commentList
    },
    convertSort() {
      if (!this.sortFlag) {
        this.getAscCommentByBlogId(this.$route.params.id)
      } else {
        this.getCommentByBlogId(this.$route.params.id)
      }
    },
    closeComment() {
      this.commentNickName = ''
    },
    // 子组件传过来的nickName
    getNickName(obj) {
      this.commentNickName = obj.nickName
      this.commentId = obj.id
    },
    showMuluHandler() {
      this.showMulu = true
      this.animationFlag = true
    },
    getCommentsSum() {
      commentApi.getCommentsSum(this.$route.params.id).then(res => {
        if (res.code === 200) {
          this.blogCommentsSum = res.data
        }
      })
    },
    Scroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const top = document.querySelector('#right-container')
      // var offsetHeight = top.offsetHeight
      if (top) {
        if (scrollTop >= 80) {
          this.animationFlag = true
          this.showMulu = true
        } else {
          this.animationFlag = false
        }
      }
    },
    lookReply(id) {
      // var elementById = document.getElementById(id)
      // commentApi.getReplyByParentId(id).then(res => {
      //   if (res.code === 200) {
      //     this.replys = res.data
      //     replys.forEach(e => {
      //
      //     })
      //     const html = `<a-comment :key="item.id" :id="item.id">
      //     <template slot="actions">
      //       <span key="comment-basic-like">
      //         <a-tooltip title="Like">
      //           <a-icon type="like" :class="activeCommentGoods===item.id?'info-like goodsActive':'info-like'" @click="commentGood(item.id)" />
      //         </a-tooltip>
      //         <span style="padding-left: '8px';cursor: 'auto'">
      //           {{ item.commentGood }}
      //         </span>
      //       </span>
      //       <span key="comment-basic-reply-to" @click="replyClick">回复</span>
      //       <span slot="actions" style="padding-left:20px;" @click="lookReply(item.id)">查看{{ item.childrenCount }}条回复<a-icon type="down" style="font-size: 14px" /></span>
      //     </template>
      //     <a slot="author">{{ item.user.nickname }}</a>
      //     <a-avatar
      //       slot="avatar"
      //       :src="item.user.header"
      //       :alt="item.user.nickname"
      //     />
      //     <p slot="content">
      //       {{ item.commentContent }}
      //     </p>
      //     <a-tooltip slot="datetime" :title="item.createdTime">
      //       <span>{{ moment(item.createdTime).fromNow() }}</span>
      //     </a-tooltip>
      //   </a-comment>`
      //   }
      // })
    },
    getNavTitle() {
      this.nav = []
      const that = this
      window.setTimeout(function() {
        var h1 = document.querySelectorAll('h1')
        h1.forEach(e => {
          const tempObj = {
            anchor: '',
            title: '',
            tag: ''
          }
          tempObj.anchor = `${e.id}`
          tempObj.title = `${e.innerText}`
          tempObj.tag = `${e.tagName}`
          that.nav.push(tempObj)
          var next = e.nextElementSibling
          // eslint-disable-next-line no-constant-condition
          while (next !== null && next.tagName !== 'H1') {
            // 如果为二级标题
            if (next.tagName === 'H2') {
              that.nav.push({
                anchor: next.id,
                title: next.innerText,
                tag: next.tagName
              })
            }
            next = next.nextElementSibling
          }
        })
        /* if (Cookies.get('nav') && JSON.parse(Cookies.get('nav')).length > 0) {
          Cookies.remove('nav')
        }
        Cookies.set('nav', that.nav)
        console.log('注入之后', JSON.parse(Cookies.get('nav')))*/
      }, 100)
    },
    // 去目录所在的地方
    toAnchorView(anchor) {
      document.getElementById(anchor).scrollIntoView()
    },
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'liked'
    },
    // 添加表情
    addEmoji() {
      this.emojiVisible = !this.emojiVisible
    },
    // 选择表情
    selectEmoji(obj) {
      this.evaluationContent += obj.data
    },
    getCollect() {
      blogApi.getCollect(this.$route.params.id).then(res => {
        if (res.code === 200) {
          this.isCollect = true
        } else {
          this.isCollect = false
        }
      })
    },
    blogCollect() {
      if (!this.isCollect) {
        var id = this.$route.params.id
        blogApi.blogCollect(id).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.isCollect = true
            blogApi.read(id).then(res => {
              if (res.code === 200) {
                this.blogInfo = res.data
                this.blogInfo.blogContent = marked(res.data.blogContent).replace(/<img src/g, '<img data-src')
              }
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.$message.error('不能取消哦！')

        // this.cancelBlogCollect()
      }
    },
    cancelBlogCollect() {
      var id = this.$route.params.id
      blogApi.cancelBlogCollect(id).then(res => {
        if (res.code === 200) {
          this.$message.error(res.msg)
          this.isCollect = false
          blogApi.read(id).then(res => {
            if (res.code === 200) {
              this.blogInfo = res.data
              this.blogInfo.blogContent = marked(res.data.blogContent).replace(/<img src/g, '<img data-src')
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getInfo(id) {
      this.blogInfoLoading = true
      console.log('getInfo')
      blogApi.read(id).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.blogInfo = res.data
            this.blogInfo.blogContent = marked(res.data.blogContent).replace(/<img src/g, '<img data-src')
            // 如果是原创的话添加版权声明
            if (res.data.blogSource === '原创') {
              this.addCopyEvent(res.data)
            }
            this.$nextTick(() => {
              this.getNavTitle()
            })
          } else {
            this.blogInfo = null
          }
          this.blogInfoLoading = false
          // this.$nextTick()
        } else {
          this.showErrorTip = true
          this.blogInfoLoading = false
        }
      }).catch(() => {
        this.showErrorTip = true
        this.blogInfoLoading = false
      })
    },
    // 收藏
    handlerSubmitCollection() {
      this.blogCollect()
    },
    getBlogGoods() {
      blogApi.getBlogGoods(this.$route.params.id).then(res => {
        if (res.code === 200) {
          this.isBlogGoods = false
        } else {
          this.isBlogGoods = true
        }
      })
    },
    // 博客点赞
    handlerBlogGoods() {
      var id = this.$route.params.id
      if (this.isBlogGoods !== true) {
        blogApi.blogGoods({ blogId: id }).then(res => {
          if (res.code === 200) {
            this.isBlogGoods = true
            this.$message.success(res.msg)
            blogApi.read(id).then(res => {
              if (res.code === 200) {
                this.blogInfo = res.data
                this.blogInfo.blogContent = marked(res.data.blogContent).replace(/<img src/g, '<img data-src')
              }
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.$message.error('不能取消哦！')
        /* blogApi.cancelBlogGoods(id).then(res => {
          if (res.code === 200) {
            this.isBlogGoods = false
            this.$message.error(res.msg)
            blogApi.read(id).then(res => {
              if (res.code === 200) {
                this.blogInfo = res.data
                this.blogInfo.blogContent = marked(res.data.blogContent)
              }
            })
          } else {
            this.$message.error(res.msg)
          }
        }) */
      }
    },
    // 评论提交
    handlerSubmitComment() {
      if (!this.commentNickName) {
        this.commentLoading = true
        const obj = {
          commentBlog: this.$route.params.id,
          commentContent: this.evaluationContent
        }
        commentApi.save(obj).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.evaluationContent = ''
            this.getInfo(obj.commentBlog)
            this.getCommentByBlogId(obj.commentBlog)
            this.blogCommentsSum++
            this.commentLoading = false
          } else {
            this.$message.info(res.msg)
            this.commentLoading = false
          }
        }).catch(() => {
          this.commentLoading = false
        })
        this.emojiVisible = false
      } else {
        const formData = new FormData()
        formData.append('blogId', this.$route.params.id)
        formData.append('pid', this.commentId)
        formData.append('content', this.evaluationContent)
        commentApi.reply(formData).then(res => {
          if (res.code === 200) {
            this.$message.success('评论成功')
            this.evaluationContent = ''
            this.blogCommentsSum++
            this.getCommentByBlogId(this.$route.params.id)
            if (this.commentId) {
              var elementById = document.getElementById(this.commentId)
              if (elementById) {
                elementById.scrollIntoView()
              }
            }
          }
        })
      }
    },
    getCommentByBlogId(blogId) {
      commentApi.getListByBlogId(blogId, '1').then(res => {
        if (res.code === 200) {
          this.sortFlag = false
          this.commentList = res.data
        }
      })
    },
    getAscCommentByBlogId(blogId) {
      commentApi.getListByBlogId(blogId, '2').then(res => {
        if (res.code === 200) {
          this.sortFlag = true
          this.commentList = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .itemStyle{
    background-color: #ffffff;
    padding: 15px;
    &:hover{
      background-color: #f2f2f2;
    }
  }
  /*二级标题缩进*/
  .h2padding{
    padding-left: 25px !important;
  }
  @media screen and (max-width: 500px) {
    .mulu{
      display: none !important;
      position: fixed;
      left: 120px;
      top: 80px;
      width: 220px;
      max-height: 450px;
      overflow-y: auto;
      box-sizing: border-box;
      background-color: #fff;
      ul{
        padding: 0;
        li{
          padding: 15px;
          list-style: none;
          &:hover{
            background-color: #d6d6d6;
            cursor: pointer;
          }
        }
      }
    }
  }
  .my-list-item{
    background-color: #ffffff !important;
    padding: 15px !important;
    &:hover{
      background-color: #f2f2f2 !important;
    }
  }
.goodsActive{
  color: #ff1800ab;
}
.display{
  display: block !important;
}
.blog-info-container{
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  .label-basic{
    font-size:13px;
    background-color: #249EDE;
    color: #fff;
    position:absolute;
    left:0;
    top:0;
    z-Index:30;
    padding: 8px 8px;
    -webkit-transform:translate(60.29%, 0%);
    -moz-transform:translate(60.29%, 0%);;
    transform:translate(60.29%, 0%);;
    text-indent:0;
  }
  .info-container{
    display: flex;
    flex-flow: column nowrap;
    background-color: #ffffff;
    margin-bottom: 15px;
    padding:15px 20px;
    .blog-info-title{
      display: flex;
      flex-flow: nowrap;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 24px;
      font-weight: bold;
      justify-content: space-around;
      padding-top: 45px;
    }
    .blog-info-meta{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      color: #a2a2a2;
      padding: 20px 0;
    }
    .blog-info-parent{
      .blog-info-content{}
    }
    .mulu{
      position: fixed;
      bottom: 0;
      z-index: 2;
      width: 220px;
      max-height: 450px;
      overflow-y: auto;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid rgb(83, 150, 228);
      ul{
        padding: 0;
        li{
          padding: 10px;
          list-style: none;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow-x: hidden;
          &:hover{
            background-color: #d6d6d6;
            cursor: pointer;
          }
        }
      }
    }
    .blog-info-bottom{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      font-size: 20px;
      align-items: center;
      color: #a2a2a2;
      /*background-color: rgba(63, 200, 227, 0.75);*/
      padding: 15px 0;
      .icon-container{
        width: 150px;
        display: flex;
        flex-flow: nowrap;
        align-items: center;
        justify-content: space-between;
        .info-bottom-item{
          &:hover{
            cursor: pointer;
          }
        }
      }
    }
  }
  /*评价类容*/
  .evaluation-container{
    display: flex;
    flex-flow: column nowrap;
    background-color: #ffffff;
    margin-bottom: 15px;
    .evaluation-bottom{
      display: flex;
      justify-content: space-between;
      padding: 15px;
      align-items: center;
      position: relative;
      .meh-icon{
        font-size: 25px;
        color: #40a9ff;
        &:hover{
          cursor: pointer;
        }
      }
      .emoji-view{
        position: absolute;
        top: -238px;
        z-index: 99;
        width: 25% !important;
        left: -197px;
        height: 300px;
      }
      .evaluation-bottom-right{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .count{
          margin-right: 15px;
        }
      }
    }
  }
  .not-login-notify{
    width: 100%;
    height: 70px;
    display: flex;
    flex-flow: column nowrap;
    background-color: #ffffff;
    padding: 15px;
    color: #717682;
    font-size: 16px;
    align-items: flex-start;
    margin-bottom: 15px;
    border-left: 4px solid #99eaff;
    .qqImage{
      width: 20px;
      height: 20px;
      margin-right: 5px;
      &:hover{
        cursor: pointer;
      }
    }
  }
  /*评价列表*/
  .evaluation-list{
    display: flex;
    flex-flow: column nowrap;
    .evaluation-list-container{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding:8px 10px;
      background-color: #ffffff;
      /*头像*/
      .evaluation-header{
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border:3px solid #d6d6d6;
      }
      /*信息容器*/
      .evaluation-info{
        display: flex;
        flex-flow: column nowrap;
        width: 87%;
        /*信息顶部 昵称 点赞量*/
        .info-top{
          display: flex;
          justify-content: space-between;
          flex-flow: row nowrap;
          font-size: 14px;
          color: #7a7a7a;
          align-items: center;
        }
        /*发表时间*/
        .info-created-time{
          font-size: 14px;
          color: #d6d6d6;
        }
        .info-content{
          font-size: 14px;
          color: #909090;
        }
      }

    }
  }
}
.muluflag{
  width: 40px;
  height: 50px;
  background-color:#fff;
  position: fixed;
  right: 0;
  bottom:450px;
  z-index: 999;
  line-height: 50px;
  text-align: center;
  color: #000;
  border: 1px solid #00cc66;
  &:hover{
    cursor: pointer;
  }
}
  .leftAnimation{
    /*transition: right 1s linear;*/
    animation: myleft 1s ease-in-out;
    -moz-animation: myleft 1s;	/* Firefox */
    -webkit-animation: myleft 1s;	/* Safari 和 Chrome */
    -o-animation: myleft 1s;
    right: 0;
  }
  .rightAnimation{
    /*transition: right 1s linear;*/
    animation: myright 1s ease-in-out;
    -moz-animation: myright 1s;	/* Firefox */
    -webkit-animation: myright 1s;	/* Safari 和 Chrome */
    -o-animation: myright 1s;
    right: -220px;
  }
  @keyframes myleft
  {
    from {right: -220px;}
    to {right: 0;}
  }
  @keyframes myright
  {
    from {right: 0;}
    to {right: -220px;}
  }
  .reply-content{
    padding-top: 10px;
    background-color: #fff;
    .sortKey{
      color: #c0c5ce;
      padding-right: 15px;
      &:hover{
        cursor: pointer;
        color: #1C1D21;
      }
    }
  }
  .coment-close-info{
    &:hover{
      color: #696c74;
      cursor: pointer;
    }
  }
</style>
